<template>
  <view class="coupon-item-wrapper" @click="$emit('onClick')">
    <view class="coupon-left">
      <view class="title">
        <view :class="couponData.couponAmount >= 1000 ? 'price small' : 'price'">{{ couponData.couponAmount }}</view>
        <view class="unit">{{ maps[couponData.unit] || '元' }}</view>
      </view>
    </view>
    <view class="coupon-right">
      <view class="name">{{ couponData.couponName }}</view>
      <view class="desc">{{ String(couponData.rewardTimeType) === '1' ? `有效期至${couponData.endTime ? dayjs(couponData.endTime).format("YYYY-MM-DD") : ""}` : `领取后，有效期${couponData.rewardExpiredDay || ''}天` }}</view>
    </view>
    <view class="circle-box top"></view>
    <view class="circle-box bottom"></view>
  </view>
</template>
<script setup>
  import dayjs from "dayjs";

  defineProps({
    couponData: {
      type: Object,
      default: () => {}
    }
  });
  defineEmits(["onClick"]);
  const maps = {
    USD: "美元",
    RMB: "元"
  }
</script>
<style lang="scss" scoped>
.coupon-item-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 108upx;
  position: relative;
  border-radius: 12upx;
  background: #FFFCF7;
  border: 1px solid #F05E3A;
  box-sizing: border-box;
  .coupon-left {
    width: 120upx;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .title {
      display: flex;
      flex-direction: row;
      align-items: flex-end;
      justify-content: center;
      .price {
        color: #F05E3A;
        font-family: DIN Alternate;
        font-size: 60upx;
        font-style: normal;
        font-weight: bold;
        line-height: 60upx;
        &.small {
          font-size: 46upx;
        }
      }
      .unit {
        color: #F05E3A;
        font-size: 20upx;
        font-style: normal;
        font-weight: 600;
        line-height: 20upx;
      }
    }
  }
  .coupon-right {
    flex: 1;
    margin-left: 20upx;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    .name {
      color: #F05E3A;
      font-size: 24upx;
      font-style: normal;
      font-weight: bold;
      line-height: normal;
      text-align: left;
    }
    .desc {
      color: #F05E3A;
      font-size: 18upx;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      text-align: left;
    }
  }
  .circle-box {
    width: 20upx;
    height: 12upx;
    background: #FFFCF7;
    overflow: hidden;
    position: absolute;
    z-index: 11;
    left: 116upx;
    &.top {
      top: -2upx;
      &::after {
        position: absolute;
        content: " ";
        width: 20upx;
        height: 20upx;
        box-sizing: border-box;
        z-index: 1;
        border-radius: 10upx;
        border: 1upx solid #F05E3A;
        left: 0;
        bottom: 0;
      }
    }
    &.bottom {
      bottom: -2upx;
      &::after {
        position: absolute;
        content: " ";
        width: 20upx;
        height: 20upx;
        box-sizing: border-box;
        z-index: 1;
        border-radius: 10upx;
        border: 1upx solid #F05E3A;
        left: 0;
        top: 0;
      }
    }
  }
}
</style>